<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>工资计算器</title>
</head>
<body>
    <div style="margin: 50px auto; text-align: center;">
        <span>
            <h3>请输入初始工资：</h3>
            <input type="text" id= "startWage">
        </span>
        <span>
            <h3>请输入工资涨幅数组(以,号间隔)：</h3>
            <input type="text" id= "arr">
        </span>
        <span>
            <h3>请输入职位数组(以,号间隔)：</h3>
            <input type="text" id= "workArr">
        </span>
        <span>
            <h3>请输入等级（不输入默认满级）：</h3>
            <input type="text" id= "level">
        </span>
        <br>
        <button id = "cal">计算</button>
        <span>
            <h3>职位</h3>
            <input type="text" id= "work"></input>
            <h3>计算结果</h3>
            <input type="text" id= "wage"></input>
            <h3>年薪</h3>
            <input type="text" id= "year"></input>
        </span>
    </div>
    <script>
        function $(id) {
            return document.getElementById(id);
        }
        
        let btn = $("cal");
        let wage = $("wage");
        let year = $("year");
        let work = $("work");
        btn.addEventListener("click",() => {
            let workArr = $("workArr").value;
            let startWage = $("startWage").value;
            let arr = $("arr").value;
            let level = $("level").value;
            if(!arr || !startWage) return alert("请输入完整信息");
            if(!level || level <= 0) {
                level = 10;
            }
            let multiple = 1;
            arr = arr.split(",");
            workArr = workArr.split(",");
            arr.forEach((val, index) => {
                if(level && level > 0 && level - 1 > index) {
                    multiple = multiple * (1 + parseFloat(val));
                }
            })
            wage.value = startWage * multiple;
            year.value = startWage * multiple * 12;
            if(workArr) {
                work.value = workArr[level - 1];
            }
        }, false);
    </script>
</body>
</html>